Spracovanie udalostí vlastného zvýraznenia v CSS: Zlepšenie interakcií pri výbere textu

Výber textu je základná interakcia na webe. Používatelia zvýrazňujú text z rôznych dôvodov: kopírovanie obsahu, zdieľanie citátov, vyhľadávanie alebo jednoducho na upútanie pozornosti. Zatiaľ čo prehliadače poskytujú predvolené zvýraznenie textu, CSS Custom Highlight API ponúka bezprecedentnú kontrolu nad touto interakciou, čo vývojárom umožňuje vytvárať vizuálne príťažlivé, kontextovo citlivé a vysoko prístupné zážitky pri výbere textu. Tento blogový príspevok sa ponára do hĺbky CSS Custom Highlight API, skúma jeho možnosti a poskytuje praktické príklady na vylepšenie vašich webových aplikácií.

Pochopenie predvoleného správania pri výbere textu

V predvolenom nastavení prehliadače štýlujú vybraný text pomocou pseudo-elementu ::selection. Vzhľad môžete zmeniť úpravou vlastností background-color a color. Napríklad:

            ::selection {
  background-color: #b3d4fc;
  color: #000;
}

            

              
                Copy
              
            
          

Tento jednoduchý CSS úryvok zmení farbu pozadia na svetlomodrú a farbu textu na čiernu vždy, keď používateľ vyberie text na stránke. Pseudo-element ::selection má však obmedzenia. Umožňuje štýlovať iba pozadie a farbu, čo obmedzuje prispôsobenie. Navyše mu chýbajú sémantické informácie o kontexte výberu. CSS Custom Highlight API tieto obmedzenia prekonáva.

Predstavenie CSS Custom Highlight API

CSS Custom Highlight API poskytuje robustnejší a flexibilnejší prístup k správe výberu textu. Zavádza nové CSS vlastnosti a JavaScript API, ktoré vám umožňujú definovať a štýlovať vlastné zvýraznenia na základe špecifických podmienok a interakcií.

Kľúčové koncepty

• Dedičnosť zvýraznenia: Zvýraznenia sú štýlované prostredníctvom kaskádového a dedičného mechanizmu podobného ostatným CSS vlastnostiam. To znamená, že môžete definovať predvolené štýly zvýraznenia na koreňovej úrovni a prepísať ich pre špecifické prvky alebo kontexty.
• Pseudo-element zvýraznenia: Pseudo-element ::highlight() sa používa na aplikovanie štýlov na pomenované zvýraznenia.
• JavaScript API: JavaScript API ako getSelection() a objekty Highlight vám umožňujú programovo vytvárať, spravovať a interagovať so zvýrazneniami.
• Prístupnosť: API podporuje ARIA atribúty a zohľadňuje prístupnosť, čím zabezpečuje, že vlastné zvýraznenia sú vnímateľné a zrozumiteľné pre používateľov so zdravotným postihnutím.

Implementácia vlastných zvýraznení: Sprievodca krok za krokom

Tu je praktický sprievodca implementáciou vlastných zvýraznení pomocou CSS Custom Highlight API:

Krok 1: Definovanie pomenovaných zvýraznení

Najprv musíte definovať pomenované zvýraznenie pomocou CSS. Tento názov sa použije na priradenie štýlov k špecifickým výberom.

            ::highlight(custom-highlight) {
  background-color: rgba(255, 0, 0, 0.3);
  color: #000;
}

            

              
                Copy
              
            
          

V tomto príklade sme definovali zvýraznenie s názvom `custom-highlight` s polopriehľadným červeným pozadím a čiernou farbou textu. Pre pozadie a text môžete zvoliť akúkoľvek platnú hodnotu farby v CSS.

Krok 2: Vytváranie zvýraznení v JavaScripte

Ďalej použite JavaScript na vytvorenie a aplikovanie zvýraznenia. To zahŕňa získanie rozsahu vybraného textu a vytvorenie objektu Highlight.

            function applyCustomHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) {
    return; // No selection
  }

  const range = selection.getRangeAt(0);
  if (range.collapsed) {
    return; // Empty selection
  }

  const highlight = new Highlight(range);

  // Register the highlight with the document. It's experimental and may need polyfill or browser flag
  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set('custom-highlight', highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Implement a fallback mechanism here, e.g., wrapping the selected text in a  with a class
    // For example:
    const span = document.createElement('span');
    span.classList.add('fallback-custom-highlight');
    span.style.backgroundColor = 'rgba(255, 0, 0, 0.3)';
    span.style.color = '#000';
    range.surroundContents(span);
  }

  selection.removeAllRanges(); // Optional: Clear the selection after highlighting
}

            

              
                Copy
              
            
          

Vysvetlenie:

• window.getSelection(): Získa aktuálny objekt výberu.
• selection.rangeCount: Skontroluje, či existuje aktívny výber.
• selection.getRangeAt(0): Získa vybraný rozsah.
• new Highlight(range): Vytvorí nový objekt `Highlight` z daného rozsahu.
• CSS.highlights.set('custom-highlight', highlight): Zaregistruje zvýraznenie v registri zvýraznení CSS. Toto je kľúčový krok, ktorý spája JavaScriptové zvýraznenie s predtým definovanými CSS štýlmi.
• Záložný mechanizmus: Zahŕňa kľúčový záložný mechanizmus pre prehliadače, ktoré ešte plne nepodporujú `CSS.highlights`. To zaručuje, že vaša funkcia sa elegantne degraduje a zachováva si funkčnosť v starších prehliadačoch.
• selection.removeAllRanges(): Zruší výber po zvýraznení. Je to voliteľné a závisí od požadovanej používateľskej skúsenosti.

Nezabudnite pripojiť túto funkciu k poslucháčovi udalostí, ako je napríklad kliknutie na tlačidlo alebo klávesová skratka.

Krok 3: Spracovanie viacerých rozsahov (prekrývajúce sa výbery)

API dokáže spracovať viacero prekrývajúcich sa rozsahov v rámci jedného zvýraznenia. Do objektu Highlight môžete pridať viacero rozsahov:

            const highlight = new Highlight();
highlight.add(range1);
highlight.add(range2);

if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
  CSS.highlights.set('custom-highlight', highlight);
} else {
  console.warn('CSS.highlights is not supported. Consider using a polyfill.');
  // Implement a fallback for multiple ranges (more complex)
  // This would require splitting the text into smaller spans and applying styles
  // This is a more advanced fallback implementation and may not be suitable for all cases
}

            

              
                Copy
              
            
          

Štýlovanie sa aplikuje na všetky rozsahy v rámci zvýraznenia.

Pokročilé prípady použitia a techniky

CSS Custom Highlight API otvára širokú škálu možností na vylepšenie interakcií pri výbere textu. Tu sú niektoré pokročilé prípady použitia a techniky:

1. Kontextovo citlivé zvýrazňovanie

Môžete použiť JavaScript na analýzu vybraného textu a aplikovať rôzne štýly zvýraznenia na základe jeho obsahu alebo okolitého kontextu. Napríklad môžete zvýrazniť kľúčové slová v dokumente špecifickou farbou alebo identifikovať a zvýrazniť úryvky kódu.

            function applyContextualHighlight() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;

  const range = selection.getRangeAt(0);
  const selectedText = range.toString();

  let highlightName = 'default-highlight';

  if (selectedText.startsWith('//')) {
    highlightName = 'comment-highlight'; // Highlight code comments
  } else if (selectedText.match(/\b(function|class|const|let)\b/)) {
    highlightName = 'keyword-highlight'; // Highlight JavaScript keywords
  }

  const highlight = new Highlight(range);

  if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
    CSS.highlights.set(highlightName, highlight);
  } else {
    console.warn('CSS.highlights is not supported. Consider using a polyfill.');
    // Fallback implementation, potentially using data attributes and custom CSS
    const span = document.createElement('span');
    span.classList.add('fallback-highlight');
    span.dataset.highlightType = highlightName;
    range.surroundContents(span);
  }

  selection.removeAllRanges();
}

            

              
                Copy
              
            
          

Definujte CSS štýly pre každý typ zvýraznenia:

            ::highlight(comment-highlight) {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

::highlight(keyword-highlight) {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

.fallback-highlight[data-highlight-type="comment-highlight"] {
  background-color: rgba(0, 255, 0, 0.2);
  color: #555;
}

.fallback-highlight[data-highlight-type="keyword-highlight"] {
  background-color: rgba(255, 255, 0, 0.2);
  color: #000;
}

            

              
                Copy
              
            
          

2. Zvýrazňovanie výsledkov vyhľadávania

API môžete použiť na zvýraznenie hľadaných výrazov v dokumente. To je obzvlášť užitočné pre stránky s výsledkami vyhľadávania alebo pre funkciu vyhľadávania v rámci aplikácie.

            function highlightSearchResults(searchTerm) {
  const text = document.body.innerText; // Or specific element
  const regex = new RegExp(searchTerm, 'gi'); // Global, case-insensitive

  let match;
  while ((match = regex.exec(text)) !== null) {
    const start = match.index;
    const end = start + searchTerm.length;

    // Create a range for each match
    const range = document.createRange();
    range.setStart(document.body.firstChild, start);
    range.setEnd(document.body.firstChild, end);

    const highlight = new Highlight(range);

    if (typeof CSS !== 'undefined' && typeof CSS.highlights !== 'undefined') {
      CSS.highlights.set('search-result-highlight', highlight);
    } else {
      console.warn('CSS.highlights is not supported. Consider using a polyfill.');
      // Fallback, again, requires careful handling of text nodes
    }
  }
}

            

              
                Copy
              
            
          

Definujte CSS štýl pre zvýraznenie výsledku vyhľadávania:

            ::highlight(search-result-highlight) {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

3. Integrácia so Shadow DOM

CSS Custom Highlight API bezproblémovo funguje so Shadow DOM, čo vám umožňuje vytvárať zapuzdrené komponenty s vlastnými štýlmi zvýraznenia. Zvýraznenia môžete definovať v rámci Shadow DOM a aplikovať ich na prvky v komponente.

4. Zohľadnenie prístupnosti

Uistite sa, že vaše vlastné zvýraznenia sú prístupné všetkým používateľom. Zvážte nasledujúce:

• Kontrast farieb: Zabezpečte dostatočný kontrast farieb medzi pozadím zvýraznenia a farbou textu, aby ste splnili smernice WCAG.
• Navigácia klávesnicou: Uistite sa, že používatelia môžu navigovať zvýrazneným textom pomocou klávesnice.
• Kompatibilita s čítačkami obrazovky: Otestujte svoje zvýraznenia s čítačkami obrazovky, aby ste sa uistili, že vybraný text je správne oznámený.
• Indikátory zamerania: Keď zvýraznený prvok získa zameranie (focus), poskytnite jasný vizuálny indikátor zamerania.

Môžete použiť ARIA atribúty na poskytnutie dodatočných sémantických informácií o zvýrazneniach. Napríklad, môžete použiť aria-label na opis účelu zvýraznenej sekcie.

5. Lokalizácia a internacionalizácia

Pri práci s výberom textu v globálnom kontexte zvážte nasledujúce:

• Smer textu: Uistite sa, že vaše zvýraznenia fungujú správne so smerom textu zľava doprava (LTR) aj sprava doľava (RTL).
• Jazykovo špecifické pravidlá: Buďte si vedomí jazykovo špecifických pravidiel pre výber textu a hranice slov.
• Podpora písiem: Používajte písma, ktoré podporujú znaky používané v rôznych jazykoch.

6. Optimalizácia výkonu

Aplikovanie vlastných zvýraznení môže ovplyvniť výkon, najmä pri veľkých dokumentoch. Zvážte nasledujúce optimalizačné techniky:

• Debouncing: Použite debouncing pre funkciu zvýraznenia, aby ste sa vyhli nadmerným výpočtom pri rýchlych výberoch.
• Ukladanie do medzipamäte (Caching): Ukladajte vypočítané rozsahy zvýraznení do medzipamäte, aby ste sa vyhli ich zbytočnému prepočítavaniu.
• Virtualizácia: Použite virtualizačné techniky na vykreslenie iba tých zvýraznení, ktoré sú aktuálne viditeľné vo viewporte.
• Web Workers: Presuňte výpočty zvýraznení do web workera, aby ste neblokovali hlavné vlákno.

Podpora prehliadačov a Polyfilly

CSS Custom Highlight API je relatívne nové a nemusí byť plne podporované všetkými prehliadačmi. Pred použitím v produkcii skontrolujte najnovšie tabuľky kompatibility prehliadačov. Zvážte použitie polyfillu na zabezpečenie podpory pre staršie prehliadače. Polyfill pridáva potrebný kód, aby staršie prehliadače rozumeli novému API. Vyhľadajte online "CSS Custom Highlight API Polyfill" a nájdite dostupné možnosti.

Záver

CSS Custom Highlight API umožňuje vývojárom vytvárať pútavé, kontextovo citlivé a prístupné zážitky pri výbere textu. Porozumením možnostiam API a aplikovaním techník opísaných v tomto blogovom príspevku môžete zlepšiť používateľskú skúsenosť vašich webových aplikácií a poskytnúť intuitívnejší a vizuálne príťažlivejší spôsob interakcie používateľov s textom. Nezabudnite pri implementácii vlastných zvýraznení uprednostniť prístupnosť a výkon a zvážiť kompatibilitu prehliadačov a možnosti polyfillov. Táto jemná kontrola nad výberom textu umožňuje vývojárom vytvárať interaktívnejšie a používateľsky prívetivejšie webové zážitky, prispôsobené špecifickým potrebám aplikácie a preferenciám používateľov. S rastúcou podporou prehliadačov sa CSS Custom Highlight API sľubuje stať nepostrádateľným nástrojom pre moderný webový vývoj.

Ďalšie zdroje

• MDN Web Docs: Highlight API
• CSS Houdini: Zistite viac o projekte CSS Houdini, ktorý umožňuje tieto pokročilé funkcie CSS.